<h2>Formularz zamówienia</h2>
<div class="span-6">
	<h4>Wybierz produkty do zamówienia</h4>
	<p><strong>z kategorii:</strong> 
	<?php
		$this->addHelperPath(APP_PATHNAME . 'application/product/views/helpers/','Product_View_Helper');
		print $this->treeSelect('id="product-category-order"');
	?>
	</p>
	<h4>Kalendarze do wyboru</h4>
	<input id="product-order-add" type="submit" value="Dodaj do zamówienia">
	<div class="product-order-list-holder">
		<ul id="product-order-list" class="product-order"></ul>
	</div>
</div>
<div class="span-12">
<?php
	print $this->form;
?>
</div>
<div class="span-6 last">
	<h6>Twoje zamówienie</h6>
	<input id="product-order-remove" type="submit" value="Popraw - usuń zaznaczone">
	<div class="product-order-list-holder added">
		<ul id="product-order-list-added" class="product-order"></ul>
	</div>
</div>
<style>
<!--
.product-order-list-holder {
	display: block;
	height: 300px;
	overflow: auto;
	border: 1px solid #333;
	padding:5px;
	margin-bottom: 10px;
}
.product-order-list-holder.added {
	color:#000;
	background: none;
	height: 400px;
}
.product-order {
	margin: 0;
}
.product-order li {
	float: left;
	margin-right:5px;
	margin-bottom:5px;
	list-style: none;
	padding: 2px;
	border: 1px solid #888;
}
.product-order li span {display: block;}
.product-order li img {
	display: block;
	text-align: center;
	border: 1px solid #888;
	padding:2px;
	background: #fff;
}
-->
</style>
<script type="text/javascript">
<!--
$('#ajax-load')
	.ajaxStart(function(){
		$(this).show();
	})
	.ajaxStop(function(){
		$(this).hide();
	});

var products = [];
function loadProducts(category_id){
	if (products[category_id] == 'undefined') {
		renderProducts(products[category_id]);
		return;
	}

	$.ajax({
		url: 'product/index/category/id/{id}?format=json'.replace('{id}',category_id),
		async:false,
		dataType: 'json',
		success: function(json){ products[category_id] = json; }
	});
	
	renderProducts(products[category_id]);
}

function loadAdded() {
	$.ajax({
		url: 'product/cart/cart/?format=json',
		async:false,
		dataType: 'json',
		success: renderOrderProducts
	});
}

function renderProducts(json) {
	var productList = $('#product-order-list');
	productList.html('');
	$(json).each(function(i,val) {
		var li = '<li>'+
			'<label>'+
				'<span>'+
					'<input class="product" type="checkbox" value="'+val.id+'" name="product['+val.id+']" />'+
					val.number +
				'</span>'+
			'<img src="/upload/product/thumb/'+ val.image+'" alt="'+ val.name +'" title="'+ val.name +'"/>'+
			'</label>'+
		'</li>';
		li = $('input[type=checkbox]',li).click(function(){
			var int = prompt("Podaj ilość zamawianych sztuk", "");
			if (int == 'undefined' || int == '' || int.replace(/[0-9]+/i,'') != '') {
				alert('Ilosc sztuk powinna być większa od `0`');
				return false;
			} else {
				$(this).attr('quantity',int);
				moveProduct(this);
			}
			return true;
		}).parents('li');
		productList.append(li);
	});
}

function renderOrderProducts(json) {
	if (json.success == false) {
		return;
	}
	var productListAdd = $('#product-order-list-added');
	productListAdd.html('');
	$(json).each(function(i,val) {
		var li = '<li>'+
			'<span>'+
				'<b>sztuk:</b>'+ val.quantity +
			'</span>'+
			'<label>'+
				'<span>'+
					'<input class="product" type="checkbox" value="'+val.id+'" name="product['+val.id+']" />'+
					val.number +
				'</span>'+
			'<img src="/upload/product/thumb/'+ val.image+'" alt="'+ val.name +'" title="'+ val.name +'"/>'+
			'</label>'+
		'</li>';
		productListAdd.append(li);
	});
}

loadProducts($('#product-category-order:eq(0)')[0].value);
loadAdded();
$('#product-category-order').change(function(){
	loadProducts(this.value);
});
$('#product-order-add').click(function(){
	$('#product-order-list input:checked').each(function(){
		moveProduct(this);
	});
	
	//zend_form
});

function moveProduct(obj) {
	var quantity = $(obj).attr('quantity');
	var success = false;
	$.ajax({
		url: 'product/cart/add/id/{id}/quantity/{quantity}?format=json'.replace('{id}',obj.value).replace('{quantity}',quantity),
		async: false,
		dataType: 'json',
		success: function(json) { success = json.success; }
	});
	
	if (!success) {
		alert('Podczas dodawania produktu do zamówienia - wystąpiły problemy z połączeniem z internetem. Spróbuj jeszcze raz za chwilę')
	}
	
	this.checked = false;
	var li = $(obj).parents('li');
	li.prepend('<span>'+
		'<b>sztuk:</b>'+ quantity +
	'</span>');
	
	$('input[type=checkbox]',li).unbind();
	
	$('#product-order-list-added').prepend(li);
}

$('#product-order-remove').click(function(){
	$('#product-order-list-added input:checked').each(function(){
		$.ajax({
			url: 'product/cart/remove/id/{id}/quantity/{quantity}?format=json'.replace('{id}',this.value),
			async: false,
			dataType: 'json',
			success: function(json) { success = json.success; }
		});

		if (!success) {
			alert('Podczas usuwania produktu z zamówienia - wystąpiły problemy z połączeniem z internetem. Spróbuj jeszcze raz za chwilę')
		}

		$(this).parents('li').remove()
	});
	
	//zend_form
});
//-->
</script>